<template>
  <div>
    <el-row style="margin-top:10px;">
      <el-col :span="8" :offset="8">
        <br>
        <br>
        <br>
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>个人中心</span>
            </div>
            <img src="../assets/default-avatar.png" style="height: 60px;border-radius: 50%"/>
            <br>
            <br>
            <div class="name-role">
              <span class="sender">{{dataForm.loginName}}</span>
            </div>
            <el-divider></el-divider>
            <div class="personal-relation">
              <div class="relation-item">手机号: {{dataForm.phone}}</div>
            </div>
            <div class="personal-relation">
              <div class="relation-item">密码: {{encrypt}}</div>
            </div>
            <el-button type="primary" @click="editPass()">修改密码</el-button>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'UserManage',
  data () {
    return {
      encrypt: '',
      userId: '',
      dataForm: {
        id: '',
        loginName: '',
        password: '',
        phone: '',
        avatar: ''
      }
    }
  },
  created: function () {
    this.createUserManage()
  },
  methods: {
    getData () {
      let url = '/admin/' + this.userId
      this.$axios.get(url).then(res => {
        this.dataForm = res.data.data
        console.log(this.dataForm.password.length)
        let i = 0
        while (i < this.dataForm.password.length) {
          this.encrypt += '*'
          i++
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    createUserManage: function () {
      // 页面创建时获取上个页面路由传过来的ID值
      this.userId = this.$route.query.id
    },
    editPass () {
      this.$router.push({name: 'ForgetPass'})
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style lang="css" scoped>

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}

.sender{
  text-align:center;
}
.registe-info{
  text-align: center;
  padding-top:10px;
}
.personal-relation {
  font-size: 16px;
  padding: 0px 5px 15px;
  margin-right: 1px;
  width: 100%
}

.relation-item {
  padding: 12px;

}

.bg-purple {
  background: #d3dce6;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

</style>
